<template>
    <div class="introduce">
        <h3>实例介绍</h3>
        <ul class="box">
            <li class="item" v-for="(item, index) in list" :key="index" @tap="dialog(index)">{{index+1}}、{{item.name}}</li>
        </ul>
        <p class="temp">未完待续。。。</p>
        <div class="desc" v-if="dialogFlag" @tap="closeDialog">
            <p class="intro">{{desc}}</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Introduce',
  data () {
    return {
      list: [
        {
          name: '借助云开发存储资源'
        }, {
          name: 'tab导航'
        }, {
          name: '手势密码功能'
        }, {
          name: '石头剪刀布小游戏'
        }
      ],
      descList: [
        {
          intro: '借助小程序云开发实现资源上传到云开发存储，通过云函数实现资源的删除同时清除数据库等功能，由于上传资源可能不可控，所以通过唯一的openId仅展示个人上传成功的资源（仅可查看自己上传的资源）。'
        }, {
          intro: '这里使用小程序原生的组件scroll-view实现左右滑动菜单栏，点击菜单动态切换下面的内容，内容区使用swiper组件实现左右滚动亦带动上方的菜单栏做出相应的切换，在每个swiper中嵌套scroll-view实现上下滚动效果，滚动的过程中使用“position:fixed;”将头部菜单栏固定，其中有一个细节是单个菜单底部border利用伪元素“:after”实现了两头圆角的效果可以说这个例子能够满足大多数人需要做到的菜单栏效果。'
        }, {
          intro: '利用canvas配合小程序api实现手势密码效果，开发者工具上很流畅，手机上有点卡顿，还是不可与原生匹敌。'
        }, {
          intro: '纯属娱乐，开心一下。'
        }
      ],
      dialogFlag: false,
      desc: ''
    }
  },
  methods: {
    dialog (index) {
      const that = this
      that.dialogFlag = true
      that.desc = that.descList[index].intro
    },
    closeDialog () {
      const that = this
      that.dialogFlag = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.introduce
  height 100%
  h3
    height 100rpx
    line-height 100rpx
    text-align center
    font-weight 600
  .box
    padding 0 30rpx 60rpx
    .item
      font-size 26rpx
      color #333
      line-height 100rpx
      text-decoration underline
  .temp
    color #ED758D
    font-size 30rpx
    text-align center
    height 100rpx
    line-height 100rpx
    font-weight 600
  .desc
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    background #e5e5e5
    z-index 99
    .intro
      line-height 60rpx
      text-indent 2em
      font-size 26rpx
      color #333
      padding 30rpx
</style>
